<template>
  <div class="w-full flex flex-col">
    <complex-table :data="data" @row-click="openDetail">
      <el-table-column :label="$t('commons.table.status')" min-width="35">
        <template #default="{ row }">
          <el-tag
            v-if="row.container.state.running"
            type="success"
            size="small"
          >
            Running
          </el-tag>
          <el-tag
            v-if="row.container.state.waiting"
            type="primary"
            size="small"
          >
            Waiting
          </el-tag>
          <el-tag
            v-if="row.container.state.pending"
            type="warning"
            size="small"
          >
            Pending
          </el-tag>
          <el-tag
            v-if="row.container.state.terminated"
            type="warning"
            size="small"
          >
            Terminated
          </el-tag>
          <el-tag v-if="row.container.state.failed" type="danger" size="small">
            Failed
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('business.pod.ready')"
        prop="ready"
        min-width="40"
      >
        <template #default="{ row }">
          <i v-if="row.container.ready" class="el-icon-check" />
          <i v-if="!row.container.ready" class="el-icon-close" />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('commons.table.name')"
        prop="container.name"
        min-width="50"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('business.pod.image')"
        min-width="150"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div class="myTag">
            <el-tag type="info" size="small">
              {{ row.container.image }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('business.workload.restarts')"
        prop="container.restartCount"
        min-width="30"
      />
      <el-table-column :label="$t('commons.table.created_time')" min-width="40">
        <template #default="{ row }">
          <span v-if="row.container.started">{{
            row.container.state.running.startedAt
          }}</span>
          <span v-if="!row.container.started">-</span>
        </template>
      </el-table-column>

      <ko-table-operations
        :buttons="operatorBtns"
        :label="$t('commons.table.action')"
      />
    </complex-table>

    <div v-if="data.length !== 0 && yamlInfo" class="w-full">
      <ko-detail-containers-info
        v-model:pod-info="yamlInfo"
        :containerInfo="containerInfo"
        :cluster="cluster"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import ComplexTable from "@/views/domain/kubeHud/views/components/complex-table/index.vue";
import KoTableOperations from "@/views/domain/kubeHud/views/components/ko-table-operations/index.vue";
import KoDetailContainersInfo from "@/views/domain/kubeHud/views/components/detail/detail-containers-info.vue";
import { checkPermissions } from "@/views/domain/kubeHud/utils/permission";
import { useI18n } from "vue-i18n";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { Container, Pod } from "../../../api/k8s";

type Prop = {
  cluster?: string;
};
const { t } = useI18n();
const router = useRouter();

const props = withDefaults(defineProps<Prop>(), { cluster: "" });
const yamlInfo = defineModel<Pod>("yamlInfo");
const containerInfo = ref({
  type: "",
  name: ""
});

const data = ref<{ type: string; container: Container }[]>([]);
const reloadContainerTable = () => {
  data.value = [
    ...(yamlInfo.value?.spec?.containers?.map(item => ({
      type: "container",
      container: item
    })) ?? []),
    ...(yamlInfo.value?.spec?.initContainers?.map(item => ({
      type: "initContainer",
      container: item
    })) ?? [])
  ];
};
const operatorBtns = [
  {
    label: t("commons.form.detail"),
    icon: "el-icon-view",
    click: row => {
      openDetail(row);
    }
  },
  {
    label: t("commons.button.logs"),
    icon: "el-icon-tickets",
    click: row => {
      openTerminalLogs(row);
    },
    disabled: () => {
      return !checkPermissions({
        scope: "namespace",
        apiGroup: "",
        resource: "pods/log",
        verb: "get"
      });
    }
  },
  {
    label: t("commons.button.terminal"),
    icon: "iconfont iconline-terminalzhongduan",
    click: row => {
      openTerminal(row);
    },
    disabled: () => {
      return !checkPermissions({
        scope: "namespace",
        apiGroup: "",
        resource: "pods/exec",
        verb: "create"
      });
    }
  },
  {
    label: t("business.pod.pod_file"),
    icon: "el-icon-files",
    click: row => {
      openPodFiles(row);
    },
    disabled: () => {
      return !checkPermissions({
        scope: "namespace",
        apiGroup: "",
        resource: "pods/exec",
        verb: "create"
      });
    }
  }
];

const openDetail = row => {
  containerInfo.value = { name: row.container.name, type: row.type };
};

const openTerminal = row => {
  const routeUrl = router.resolve({
    path: "/terminal",
    query: {
      cluster: props.cluster,
      namespace: yamlInfo.value?.metadata?.namespace,
      pod: yamlInfo.value?.metadata?.name,
      container: row.container.name,
      type: "terminal"
    }
  });

  window.open(routeUrl.href, "_blank");
};

const openTerminalLogs = row => {
  const routeUrl = router.resolve({
    path: "/terminal",
    query: {
      cluster: props.cluster,
      namespace: yamlInfo.value?.metadata?.namespace,
      pod: yamlInfo.value?.metadata?.name,
      container: row.container.name,
      type: "log"
    }
  });

  window.open(routeUrl.href, "_blank");
};

const openPodFiles = row => {
  router.push({
    name: "PodFile",
    params: {
      namespace: yamlInfo.value?.metadata?.namespace,
      name: yamlInfo.value?.metadata?.name
    },
    query: {
      container: row.container.name
    }
  });
};

watch(
  () => yamlInfo.value,
  () => {
    reloadContainerTable();
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.complex-table {
  ::v-deep tbody tr:hover > td {
    cursor: pointer;
  }
}
</style>
